<template>
    <div>
        <el-form :inline="true" :model="formInline" size="mini" class="toolbar">
            <el-form-item label="学生ID" >
                <el-input v-model="formInline.id" placeholder="学生ID"></el-input>
            </el-form-item>
           <el-form-item label="学生姓名" >
                <el-input v-model="formInline.name" placeholder="学生姓名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch">学生查询</el-button>
            </el-form-item>
        </el-form>
        <!--表格区-->
        <el-table :data="tableData" border style="width: 100%;" size="small">
            <template slot="empty">
                还没有数据呢~ (⊙︿⊙)
            </template>
            <el-table-column prop="tableData.name" label="学生姓名" width="400" align="center">
            </el-table-column>
            <el-table-column prop="tableData.id" label="学生ID" width="400">
            </el-table-column>
            <el-table-column prop="tableData.proj" label="科目名称" width="400" >
            </el-table-column>
            <el-table-column prop="tableData.homework" label="作业名称"  >
            </el-table-column>
            <el-table-column prop="tableData.grade" label="完成情况"  >
            </el-table-column>
        </el-table>
        <!--分页区-->
        <div class="Pagination" style="text-align: left; margin-top: 10px;">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="limit"
                layout="total, prev, pager, next"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
  export default {
    data() {
        return {
            tableData: [],
            limit: 10,
            total: 0,
            currentPage: 1,
            formInline:{
                id:'',
                name:''
            }
        }
    },
    created(){
        this.getListData();
    },
    methods:{
        getListData(){
            let form = {
                page:this.currentPage,
                limit:this.limit,
                id:this.formInline.id,
                name:this.formInline.name,
            }
            this.getRequest('/book/get-list', form).then(resp => {
                if (resp.code == 200) {
                    this.tableData = resp.data;
                    this.total = resp.total;
                }
            })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getListData();
        },
        onSearch(){
            this.getListData();
        },
        onimport(){
            this.getListData();
        }
    }
  };
</script>

<style scoped>
    .toolbar{
        height: 40px;
    }
</style>